/*
 * @Description: 
 * @Author: 张凌瑞
 * @Date: 2021-03-06 09:34:13
 * @LastEditTime: 2021-03-09 10:26:11
 * @LastEditors: 张凌瑞
 */

import React,{FC,useEffect,useState} from "react";
import addexamCss from "./addexam.less";

import { useDispatch, useSelector, ExamModelState ,AddexamModelState} from "umi";
import moment from 'moment';// 格式化时间 

import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    TimePicker,
} from 'antd';
const { Option } = Select;

type SizeType = Parameters<typeof Form>[0]['size'];

const addexam: FC = () => {
    let dispatch = useDispatch();

    useEffect(() => {
        dispatch({ type: 'exam/examList'});
        dispatch({ type: 'exam/examType' });//考试类型
        dispatch({ type: 'exam/classType' });//课程 
    },[])
    const onFinish = (values: any) => {
        dispatch({
            type: 'addexam/addexam',
            payload: {
                subject_id: values.classType,
                exam_id: values.examType,
                title: values.examname,
                number: values.count,
                start_time: moment(values.startTime).unix(),
                end_time:moment(values.endTime).unix(),
            }
        })
    }
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    }
    const config = {
        rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    const rangeConfig = {
        rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
    };
    const { RangePicker } = DatePicker;
    
  
    let {examTypeList ,classTypeList} = useSelector((state: { exam: ExamModelState }) => state.exam);

    let { questionids } = useSelector((modules: { addexam: AddexamModelState }) => modules.addexam);
    
    
    // 更新
    useEffect(() => {
        if (questionids) {
            dispatch({
                type: 'addexam/examUpdate',
                payload: { question_ids: questionids },
            })
        }
    }, [questionids]);
    
    return <div>
        <Form labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                initialValues={{ size: componentSize }}
                onValuesChange={onFormLayoutChange}
                size={componentSize as SizeType}
                onFinish={onFinish}>
                    
            <Form.Item label="试卷名称：" rules={[{ required: true }]} name='examname'>
                <Input />
            </Form.Item>
            
            <Form.Item label="选择考试类型：" rules={[{ required: true }]} name="examType">
                <Select allowClear >
                    {
                        examTypeList.map((item:any) => {
                            return <Option value={item.exam_id} key={item.exam_id}>{ item.exam_name}</Option>
                        })
                    }
                </Select>
            </Form.Item>

            <Form.Item label="选择课程：" rules={[{ required: true }]} name="classType">
                <Select>
                    {
                        classTypeList.map((item: any) => {
                            return <Option value={item.subject_id} key={item.subject_id}>{ item.subject_text}</Option>
                        })
                    }
                </Select>
            </Form.Item>

            <Form.Item label="设置数量：" rules={[{ required: true }]} name='count'>
                <InputNumber />
            </Form.Item>

            <Form.Item name="startTime" label="开始时间" {...config} rules={[{ required: true }]}>
                <TimePicker />
            </Form.Item>
            <Form.Item name="endTime" label="结束时间" {...config} rules={[{ required: true }]}>
                <TimePicker />
            </Form.Item>
            
            <Button type="primary" htmlType="submit">
                    创建试卷
            </Button>
        </Form>
    </div>
}
export default addexam;